<!DOCTYPE html>
<html>

<head>
    <title>uNmINeD</title>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

    <!-- OpenLayers CSS -->
    <link rel="stylesheet" type="text/css"
        href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/css/ol.css"
        integrity="sha256-jckPZk66EJrEBQXnJ5QC2bD+GxWPDRVVoMGr5vrMZvM=" crossorigin="anonymous">

    <!-- OpenLayers JS -->
    <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.9.0/build/ol.js"
        integrity="sha256-77dogUPZ1WVoK9BDF0CxsKnAouX3YzK6n4tIcbDgtFI=" crossorigin="anonymous"></script>


    <!-- Map metadata generated by uNmINeD -->
    <script type="text/javascript" src="unmined.map.properties.js"></script>
    <script type="text/javascript" src="unmined.map.regions.js"></script>
    <script type="text/javascript" src="unmined.map.players.js"></script>

    <!-- Custom markers -->
    <script type="text/javascript" src="custom.markers.js"></script>

    <!-- uNmINeD JS -->
    <script type="text/javascript" src="unmined.openlayers.js"></script>

    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            height: 100%;
            width: 100%;
            image-rendering: pixelated;
        }

        .mouseposition {
            background-color: white;
            padding: 3px;
            text-align: right;
        }

        .mousepositioncoord {
            min-width: 40px;
            display: inline-block;
        }

        div.ol-mouse-position {
            background-color: white;
            padding: 6px;
            border-radius: 3px;
            box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.2);
        }
    </style>

</head>

<body>
    <div id="map"></div>

    <script type="text/javascript">

        document.title = UnminedMapProperties.worldName + " - " + document.title;

        if (UnminedCustomMarkers && UnminedCustomMarkers.isEnabled && UnminedCustomMarkers.markers) {
            UnminedMapProperties.markers = UnminedMapProperties.markers.concat(UnminedCustomMarkers.markers);
        }
        
        let unmined = new Unmined();

        if (UnminedPlayers && UnminedPlayers.length > 0) {
            UnminedMapProperties.markers = UnminedMapProperties.markers.concat(unmined.createPlayerMarkers(UnminedPlayers));
        }

        unmined.map('map', UnminedMapProperties, UnminedRegions);

    </script>
</body>

</html>